<!--
 * @Author: your name
 * @Date: 2021-11-06 21:04:15
 * @LastEditTime: 2021-11-07 09:36:47
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \ej-app2\src\views\User.vue
-->
<template>
    <div class="top">
        <div class="logo">
            <van-image
                    round
                    width="6rem"
                    height="6rem"
                    :src="user_data.userFace"
                />
            <van-nav-bar :title="user_data.username" />
        </div>
        <van-cell-group inset>
            <van-row>
                <div class="right">
                    账户余额
                    <div class="balance">{{user_data.balance}}</div>
                </div> 
                <van-button round type="primary" text="充值" @click="setBalance"/>
            </van-row>
        </van-cell-group>

        <div class="bottom">
            <van-cell is-link @click="showPopup">常用地址</van-cell>
            <van-popup v-model:show="add_show" position="bottom" :style="{ height: '30%' }" closeable="true" >
                <addres />
            </van-popup>
            <van-cell is-link @click="showPopup">联系我们</van-cell>
            <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }" />
        </div>

        <van-button round color="#7232dd" block @click="outLogin">退出登录</van-button>

        <van-dialog v-model:show="cz_show" title="充值" show-cancel-button @confirm="onSubmit">
            <!-- 允许输入数字，调起带符号的纯数字键盘 -->
            <van-field v-model="number" autofocus="true" border="true" type="number" label="充值金额" />
        </van-dialog>

        <tabbar />
    </div>
    {{number}}
</template>

<script>
import {getUserInfo} from "@/utils/auth"
import { get, post } from '../utils/axios'
import { Dialog } from 'vant';
import Cookie from "js-cookie"
import Addres from '../components/Addres.vue';
import Tabbar from '../components/Tabbar.vue';
export default {
  components: { Addres ,Dialog, Tabbar},
    
    data(){
        return{
            add_show:false,
            user_data:{},//用户数据
            cz_show:false,//充值模态框
            number:'',//充值金额
            respnse:"",
        }
    },
    
    methods:{
        showPopup(){
            this.add_show=true
        },

        // 获取当前用户数据
        getUserData(){
            getUserInfo().then((res)=>{
                console.log(res.data)
                this.user_data=res.data;
            })
        },

        // 充值
        setBalance(){
            console.log(11)
            this.cz_show=true
            
        },
        
        onSubmit(){
            console.log(2)
            get('/account/recharge',{customerId:this.user_data.id,money:this.number}).then((res)=>{
                this.respnse=res;
                console.log(this.respnse)
                if(this.respnse.status==200){
                    alert(this.respnse.statusText)
                }
                setTimeout(()=>{
                    this.$router.go(0)
                },500);
            })
        },

        // 退出登录
        outLogin(){
            post('/user/logout').then((msg)=>{
                // console.log(msg)
                Cookie.remove('App-Token');
                this.$router.push('/');
            })
        }

    },

    created(){
        this.getUserData()
    }
}
</script>

<style lang="less" scoped>
    .top{
        background-color: cornflowerblue;
        width: 80%;
        margin: 10px auto;
        text-align: center;
        // display: flex;
        // justify-content: center;
        // flex-wrap: wrap;
        // align-items: center;
    }
    .van-cell-group{
        background-color: antiquewhite;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

    }
</style>